<template>
  <view class="flex flex-row">
    <slot name="default" :data="{ data: time_data, finish: isfinish }">
      <tm-text :color="props.color" :label="text"></tm-text>
    </slot>
  </view>
</template>
<script lang="ts" setup>
import tmText from "../tm-text/tm-text.vue";
import { computed, onMounted, ref, watch } from "vue";

const emits = defineEmits(["start", "end", "change"]);
const props = defineProps({
  time: {
    type: Number,
    default: 10 * 1000,
  },
  format: {
    type: String,
    default: "DD天HH小时MM分SS秒MS毫秒",
  },
  autoStart: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: "",
  },
});
let timid: number | undefined = undefined;
let now = ref(0);
interface timeFormar {
  day: number | string;
  hour: number | string;
  minutes: number | string;
  seconds: number | string;
  millisecond: number | string;
}
let time_data = computed((): timeFormar => formatTime(props.time - now.value));

const isfinish = ref(true);

watch(
  () => now.value,
  () => {
    if (now.value == props.time || now.value === 0) {
      isfinish.value = true;
    }
  }
);
const text = computed<string>(() => {
  let ps = props.format;
  ps = ps.replace(/(DD)/g, String(time_data.value.day));
  ps = ps.replace(/(MM)/g, String(time_data.value.minutes));
  ps = ps.replace(/(HH)/g, String(time_data.value.hour));
  ps = ps.replace(/(SS)/g, String(time_data.value.seconds));
  ps = ps.replace(/(MS)/g, String(time_data.value.millisecond));
  return ps;
});
onMounted(() => {
  formatTime(props.time);
  if (props.autoStart) {
    start();
  }
});
function formatTime(my_time: number): timeFormar {
  var daysRound = Math.floor(my_time / 1000 / 60 / 60 / 24);
  var hoursRound = Math.floor((my_time / 1000 / 60 / 60) % 24);
  var minutesRound = Math.floor((my_time / 1000 / 60) % 60);
  var secondsRound = Math.floor((my_time / 1000) % 60);
  var millisecondRound = Math.floor(my_time % 1000);
  let time: timeFormar = {
    day: daysRound > 9 ? daysRound : "0" + daysRound, //天
    hour: hoursRound > 9 ? hoursRound : "0" + hoursRound, //小时,
    minutes: minutesRound > 9 ? minutesRound : "0" + minutesRound, //分.
    seconds: secondsRound > 9 ? secondsRound : "0" + secondsRound, //秒。
    millisecond: millisecondRound > 9 ? millisecondRound : "00" + millisecondRound, //毫秒。
  };
  return time;
}
// 开始或者继续。
function start() {
  clearInterval(timid);
  emits("start");
  timid = setInterval(() => {
    let lst = now.value + 50;
    if (lst > props.time) {
      clearInterval(timid);
      isfinish.value = true;
      emits("end");
      return;
    }
    isfinish.value = false;
    now.value = lst;
    emits("change", time_data);
  }, 50);
}
// 停止，直接结束。
function stop() {
  clearInterval(timid);
  now.value = props.time;
  emits("end");
}
// 暂停。
function pause() {
  clearInterval(timid);
}
// 重置。
function resinit() {
  clearInterval(timid);
  now.value = 0;
  isfinish.value = true;
}
//对外暴露的方法和属性。
defineExpose({
  finish: isfinish,
  start: start,
  stop: stop,
  pause: pause,
  resinit: resinit,
});
</script>
